<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../js/nav.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    } 

    .product-container {
      display: flex;
      flex-direction: column;
     
      margin: 0 auto;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 8px;
    }
    .product{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    .product-titles {
      text-align: center;
      width: 100px;
      cursor: pointer;
      margin-bottom: 10px;
      padding: 10px;
      background-color: #3498db;
      color: #fff;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    .product-titles:hover {
      background-color: #2980b9;
    }

    .product-description {
      display: none;
      padding: 10px;
      width: 1250px;
      margin: 0 auto;
      background-color: #f4f4f4;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .product-description.active {
      display: block;
    }
  </style>
  <title>商品详情</title>
</head>
<body>

   <!-- 头部 -->
   <div class="header">
    <img src="../img/logo/logo.svg" alt="">
  </div>
  <!-- 导航栏 -->
  <div>
    <nav id="navbar">
      <div >
        <a href="./index.html" class="nav-item" onclick="highlightNavItem(this,event)">首页</a>
        <a href="./category.html" class="nav-item" onclick="highlightNavItem(this,event)">商品分类</a>
        <a href="./new.html" class="nav-item" onclick="highlightNavItem(this,event)">每月上新</a>
        <a href="./hot.html" class="nav-item" onclick="highlightNavItem(this,event)">热销推荐</a>
        <a href="./service.html" class="nav-item" onclick="highlightNavItem(this,event)">在线客服</a>
        <a href="./about.html" class="nav-item" onclick="highlightNavItem(this,event)" >关于我们</a>
      </div>
      <div class="icons">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/sousuo.png" alt="搜索">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/jushoucang.png" alt="收藏">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/gouwuche.png" alt="购物车">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/gerenzhongxin.png" alt="个人中心">
      </div>
    </nav>
  </div>

  <div style="margin-top: 50px;" class="product-container">
    <div class="product">
    <div class="product-titles" onclick="showProduct('product1')">衬衣</div>
    <div class="product-titles" onclick="showProduct('product2')">鞋子</div>
    <div class="product-titles" onclick="showProduct('product3')">书包</div>
    </div>

    <div id="product1" class="product-description active">
      <div class="product-list">
        <div class="product-item">
          <img src="../img/product/product-1-1.jpg" alt="Product 1">
          <h3>clothing</h3>
          <p>Colorful Pattern Shirts</p>
          <span class="price">$238.85</span>
          <button>Add to Cart</button>
        </div>
      
        <div class="product-item">
          <img src="../img/product/product-2-1.jpg" alt="Product 2">
          <h3>clothing</h3>
          <p>Plain Color Pocket Shirts</p>
          <span class="price">$138.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-3-1.jpg" alt="Product 2">
          <h3>Shirts</h3>
          <p>Vintage Floral Oil Shirts</p>
          <span class="price">$338.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-4-1.jpg" alt="Product 2">
          <h3> clothing</h3>
          <p>Colorful Hawaiian Shirts</p>
          <span class="price">$123.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-5-1.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Flowers Sleeve Lapel Shirt</p>
          <span class="price">$164.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-6-1.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Ethnic Floral Casual Shirts</p>
          <span class="price">$250.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-7-1.jpg" alt="Product 2">
          <h3> shone</h3>
          <p>Stitching Hole Sandals</p>
          <span class="price">$520.12</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-8-1.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Mens Porcelain Shirt</p>
          <span class="price">$134.85</span>
          <button>Add to Cart</button>
        </div>
        </div>
    </div>

    <div id="product2" class="product-description">
      <div class="product-list">
        <div class="product-item">
          <img src="../img/product/category-thumb-2.jpg" alt="Product 1">
          <h3>clothing</h3>
          <p>Colorful Pattern Shirts</p>
          <span class="price">$238.85</span>
          <button>Add to Cart</button>
        </div>
      
        <div class="product-item">
          <img src="../img/product/category-thumb-3.jpg" alt="Product 2">
          <h3>clothing</h3>
          <p>Plain Color Pocket Shirts</p>
          <span class="price">$138.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/category-thumb-4.jpg" alt="Product 2">
          <h3>Shirts</h3>
          <p>Vintage Floral Oil Shirts</p>
          <span class="price">$338.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/category-thumb-5.jpg" alt="Product 2">
          <h3> clothing</h3>
          <p>Colorful Hawaiian Shirts</p>
          <span class="price">$123.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/category-thumb-6.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Flowers Sleeve Lapel Shirt</p>
          <span class="price">$164.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/category-thumb-3.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Ethnic Floral Casual Shirts</p>
          <span class="price">$250.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/category-thumb-8.jpg" alt="Product 2">
          <h3> shone</h3>
          <p>Stitching Hole Sandals</p>
          <span class="price">$520.12</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/category-thumb-2.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Mens Porcelain Shirt</p>
          <span class="price">$134.85</span>
          <button>Add to Cart</button>
        </div>
        </div>
    </div>

    <div id="product3" class="product-description">
      <div class="product-list">
        <div class="product-item">
          <img src="../img/product/category-thumb-2.jpg" alt="Product 1">
          <h3>clothing</h3>
          <p>Colorful Pattern Shirts</p>
          <span class="price">$238.85</span>
          <button>Add to Cart</button>
        </div>
      
        <div class="product-item">
          <img src="../img/product/product-7-1.jpg" alt="Product 2">
          <h3>clothing</h3>
          <p>Plain Color Pocket Shirts</p>
          <span class="price">$138.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-2-1.jpg" alt="Product 2">
          <h3>Shirts</h3>
          <p>Vintage Floral Oil Shirts</p>
          <span class="price">$338.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-6-1.jpg" alt="Product 2">
          <h3> clothing</h3>
          <p>Colorful Hawaiian Shirts</p>
          <span class="price">$123.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-1-1.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Flowers Sleeve Lapel Shirt</p>
          <span class="price">$164.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-2-1.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Ethnic Floral Casual Shirts</p>
          <span class="price">$250.85</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-4-1.jpg" alt="Product 2">
          <h3> shone</h3>
          <p>Ethnic Floral Casual Shirts</p>
          <span class="price">$520.12</span>
          <button>Add to Cart</button>
        </div>
        <div class="product-item">
          <img src="../img/product/product-3-1.jpg" alt="Product 2">
          <h3> Shirts</h3>
          <p>Stitching Hole Sandals</p>
          <span class="price">$134.85</span>
          <button>Add to Cart</button>
        </div>
        </div>
    </div>

  </div>

  <script>
    function showProduct(productId) {
      var productDescriptions = document.getElementsByClassName('product-description');
      for (var i = 0; i < productDescriptions.length; i++) {
        productDescriptions[i].classList.remove('active');
      }

      var selectedProduct = document.getElementById(productId);
      if (selectedProduct) {
        selectedProduct.classList.add('active');
      }
    }
  </script>

</body>
</html>

